@import './db-vars.scss';

.page {
    width: 100%;
    height: 100%;
    background: #0D142B;
    // width: 1920*$vw;
    // height: 1080*$vw;
}

.pageBox {
    width: 100%;
    // height: calc(100% - 74*$vw);
    height: calc(100% - #{74*$vw});
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    .screen_l {
        width: 456*$vw;
        height: 100%;
    }

    .screen_c {
        width: 936*$vw;
        height: 100%;
        .c_top {
            margin-top: 26*$vw;
            width: 100%;
            height: 405*$vw;
            background: url('~@/assets/image/topBg.png') no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 30*$vw 42*$vw;
            box-sizing: border-box;
            position: relative;
            .c_left {
                width: 220*$vw;
                .item {
                    width: 100%;
                    height: 70*$vw;
                    background: url('~@/assets/image/itemBg.png') no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    justify-content: center;
                    margin-top: 18*$vw;
                    p {
                        font-size: 22*$vw;
                        font-weight: bold;
                        line-height: 32*$vw;
                        letter-spacing: 0*$vw;
                        color: #FFFFFF;
                        margin-bottom: 2*$vw;
                    }
                    span {
                        font-size: 15*$vw;
                        font-weight: normal;
                        line-height: 24*$vw;
                        color: #FFFFFF;
                    }
                }
                .item:first-child {
                    margin-top: 0;
                }
            }
            .c_cen {
                display: flex;
                flex-direction: column;
                align-items: center;
                .cen_num {
                    width: 264*$vw;
                    height: 264*$vw;
                    img {
                        position: absolute;
                        left: 256*$vw;
                        top: -40*$vw;
                        width: 424*$vw;
                        height: 424*$vw;
                    }
                    .cen_text {
                        position: absolute;
                        top: 50*$vw;
                        width: 264*$vw;
                        height: 264*$vw;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        p {
                            font-size: 32*$vw;
                            font-weight: bold;
                            line-height: 45*$vw;
                            text-align: center;
                            letter-spacing: 0*$vw;
                            color: #66FFFF;
                            margin-bottom: 10*$vw;
                        }
                        span {
                            font-size: 18*$vw;
                            font-weight: 500;
                            line-height: 28*$vw;
                            text-align: center;
                            letter-spacing: 0*$vw;
                            color: #FFFFFF;
                        }
                    }
                }
                .item {
                    width: 220*$vw;
                    height: 70*$vw;
                    background: url('~@/assets/image/itemBg.png') no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    justify-content: center;
                    margin-top: 2*$vw;
                    p {
                        font-size: 24*$vw;
                        font-weight: bold;
                        line-height: 32*$vw;
                        letter-spacing: 0*$vw;
                        color: #FFFFFF;
                        margin-bottom: 4*$vw;
                    }
                    span {
                        font-size: 16*$vw;
                        font-weight: normal;
                        line-height: 24*$vw;
                        color: #FFFFFF;
                    }
                }
            }
        }
        .c_bom {
            margin-top: 20*$vw;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                width: 800*$vw;
            }
        }
    }

    .screen_r {
        width: 456*$vw;
        height: 100%;
    }
}

.card {
    width: 100%;
    .card_title {
        width: 100%;
        height: 36*$vw;
        background: url('~@/assets/image/card_title_bg.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        padding-left: 32*$vw;
        box-sizing: border-box;
        font-size: 18*$vw;
        color: #E5F2FC;
        letter-spacing: 0;
        text-shadow: 0 0 8*$vw #008DF8;
        font-weight: 400;
    }
    .card_box {
        width: 100%;
        .typeBox {
            width: 100%;
            height: 320*$vw;
            padding: 15*$vw 15*$vw;
            box-sizing: border-box;
            overflow: hidden;
            .item {
                margin-top: 10*$vw;
                .item_top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 8*$vw;
                    .item_t_l {
                        display: flex;
                        align-items: center;
                        i {
                            font-size: 16*$vw;
                            color: transparent;
                        }
                        span {
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            width: 40*$vw;
                            height: 22*$vw;
                            font-size: 14*$vw;
                            font-weight: normal;
                            line-height: 14*$vw;
                            letter-spacing: 0*$vw;
                            color: #FFFFFF;
                            margin-left: 4*$vw;
                            box-sizing: border-box;
                            border: 1*$vw solid transparent;
                        }
                        p {
                            margin-left: 4*$vw;
                            font-size: 16*$vw;
                            font-weight: 350;
                            line-height: 20*$vw;
                            display: flex;
                            align-items: center;
                            letter-spacing: 0*$vw;
                            color: #FFFFFF;
                        }
                        
                    }
                    .item_t_r {
                        color: white;
                        font-size: 16*$vw;
                        font-weight: 350;
                        line-height: 20*$vw;
                        display: flex;
                        align-items: center;
                        letter-spacing: 0*$vw;
                    }
                }
            }
            .item:nth-child(1) {
                .item_t_l {
                    i {
                        color: #81DC6F;
                    }
                    span {
                        border-image: linear-gradient(270deg, #1890FF 0%, #1EE7E7 99%) 1;
                    }
                }
                
            }
            .item:nth-child(2) {
                .item_t_l {
                    i {
                        color: #D85766;
                    }
                    span {
                        border-image: linear-gradient(270deg, #1890FF 0%, #1EE7E7 99%) 1;
                    }
                }
                
            }
        }
        .lineBox {
            height: 300*$vw;
            padding: 15*$vw 0 15*$vw 10*$vw;
            box-sizing: border-box;
            .lineChat {
                width: 100%;
                height: 100%;
            }
        }
        .numBox {
            height: 280*$vw;
            padding: 15*$vw 0 15*$vw 10*$vw;
            box-sizing: border-box;
            .barChat {
                width: 100%;
                height: 100%;
            }
        }
        .getBox {
            height: 300*$vw;
            padding-top: 12*$vw;
            box-sizing: border-box;
            .table_head {
                width: 460*$vw;
                height: 41*$vw;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 16*$vw;
                font-weight: normal;
                line-height: 24*$vw;
                letter-spacing: 0*$vw;
                background: #07173D;
                .head1 {
                    width: 78*$vw;
                    text-align: center;
                    color: #6FBAFF;
                }
                .head2 {
                    width: 110*$vw;
                    text-align: center;
                    color: #6FBAFF;
                }
            }
            .table_body {
                height: 235*$vw;
                overflow: hidden;
                .item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 13*$vw;
                    .head3 {
                        width: 78*$vw;
                        text-align: center;
                        font-size: 14*$vw;
                        font-weight: normal;
                        line-height: 34*$vw;
                        letter-spacing: 0*$vw;
                        color: #00FFE0;
                    }
                    .head4 {
                        width: 110*$vw;
                        text-align: center;
                        font-size: 14*$vw;
                        font-weight: normal;
                        line-height: 34*$vw;
                        letter-spacing: 0*$vw;
                        color: #FFFFFF;
                    }
                    .head5 {
                        width: 110*$vw;
                        text-align: center;
                        font-size: 14*$vw;
                        font-weight: normal;
                        line-height: 34*$vw;
                        letter-spacing: 0*$vw;
                        color: #FFFFFF;
                    }
                    .head6 {
                        width: 110*$vw;
                        text-align: center;
                        font-size: 14*$vw;
                        font-weight: normal;
                        line-height: 34*$vw;
                        letter-spacing: 0*$vw;
                        color: #FF0101;
                    }
                }
            }
        }
        .addBox {
            height: 300*$vw;
            padding: 15*$vw 0 15*$vw 10*$vw;
            box-sizing: border-box;
            .addChat {
                width: 100%;
                height: 100%;
            }
        }
        .rankBox {
            height: 310*$vw;
            padding: 10*$vw 27*$vw 10*$vw 19*$vw;
            box-sizing: border-box;
            .table_head {
                width: 410*$vw;
                height: 41*$vw;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 16*$vw;
                font-weight: normal;
                line-height: 24*$vw;
                letter-spacing: 0*$vw;
                .head1 {
                    width: 78*$vw;
                    text-align: center;
                    color: #FFFFFF;
                }
                .head2 {
                    width: 110*$vw;
                    text-align: center;
                    color: #FFFFFF;
                }
            }
            .table_body {
                height: 230*$vw;
                margin-top: 6*$vw;
                overflow: hidden;
                .item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 16*$vw;
                    width: 410*$vw;
                    height: 32*$vw;
                    background: url('~@/assets/image/tbodyBg.png') no-repeat;
                    background-size: 100% 100%;
                    .head3 {
                        width: 78*$vw;
                        text-align: center;
                        font-size: 14*$vw;
                        font-weight: normal;
                        line-height: 34*$vw;
                        letter-spacing: 0*$vw;
                        color: #00FFE0;
                    }
                    .head4 {
                        width: 110*$vw;
                        text-align: center;
                        font-size: 14*$vw;
                        font-weight: normal;
                        line-height: 20*$vw;
                        letter-spacing: 0*$vw;
                        color: #FFFFFF;
                    }
                    .head5 {
                        width: 110*$vw;
                        text-align: center;
                        font-size: 14*$vw;
                        font-weight: normal;
                        line-height: 34*$vw;
                        letter-spacing: 0*$vw;
                        color: #15F9DD;
                    }
                    .head6 {
                        width: 110*$vw;
                        text-align: center;
                        font-size: 14*$vw;
                        font-weight: normal;
                        line-height: 34*$vw;
                        letter-spacing: 0*$vw;
                        color: #F9E20A;
                    }
                }
            }
        }
    }
}

.db_chat {
    position: relative;
    .g-full-chart {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
  }
  